/** biome-ignore-all lint/a11y/useKeyWithClickEvents: ignore */
/** biome-ignore-all lint/a11y/noStaticElementInteractions: ignore */

import { cn } from "@renderer/lib/utils";
import { memo } from "react";

type PromptMenuItemMenuItemProps = {
  title: string;
  isSelected: boolean;
  onClick: () => void;
  onMouseEnter: () => void;
  setRefElement?: (element: HTMLDivElement) => void;
};

export const PromptMenuItem = memo(function PromptMenuItem({
  title,
  isSelected,
  onClick,
  onMouseEnter,
  setRefElement,
}: PromptMenuItemMenuItemProps) {
  return (
    <div
      className={cn(
        "group relative col-span-full grid cursor-pointer select-none grid-cols-[auto_1fr_1.5rem_0.5rem_auto] rounded-[calc(var(--radius-lg)-1px)] px-3 py-2 text-base/6 text-fg outline-0 sm:px-2.5 sm:py-1.5 sm:text-sm/6",
        isSelected
          ? "bg-accent text-accent-fg"
          : "hover:bg-accent hover:text-accent-fg",
      )}
      tabIndex={-1}
      ref={setRefElement}
      role="option"
      aria-selected={isSelected}
      onMouseEnter={() => {
        onMouseEnter();
      }}
      onMouseDown={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onClick();
        }
      }}
      onClick={() => {
        onClick();
      }}
    >
      <span className="col-start-2">{title}</span>
    </div>
  );
});
